import React, { Component } from 'react'
import { nanoid } from 'nanoid';
import { connect } from 'react-redux';

import { creatrAddPersonAction } from '../../redux/action/person';

 class Person extends Component {
    
    addPerson = () => {
        let name = this.nameNode.value;
        let age = this.ageNode.value;
        // console.log({id:nanoid(),name,age});
        this.props.creatrAddPersonAction({id:nanoid(),name,age})
    }
    render() {
        return (
            <div>
                <h1>我是Person组件,Count组件的和为:{ this.props.count }</h1>
                <input ref= { c=>this.nameNode = c } type="text" placeholder="输入名字" />
                <input ref= { c=>this.ageNode = c } type="text" placeholder="输入年龄" />
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {
                        this.props.personLis.map((personObj) => {
                            return <li key={personObj.id}>名字{personObj.name} -- 年龄{personObj.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({
        personLis: state.personReducer,
        count: state.countReducer
    }),
    { creatrAddPersonAction }
)(Person)
